<template>
  <div class="shopping">
    <van-row type="flex">
      <van-col span="2">
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </van-col>
      <van-col span="22" class="col">
        <van-icon name="search" class="searchIcon" />
        <input type="text" class="search" placeholder="请输入搜索的商家和商家名称" />
      </van-col>
    </van-row>
    <van-icon name="location-o" />
    <span class="address" v-if="address">{{address}}</span>
    <span class="errorAddress" v-else>定位有误请打开位置开关！</span>
    <h1 class="shop">------附近商家------</h1>

    <van-row type="flex">
      <van-col span="6" style="font-size:13px" @click="opationOne">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" />
          <i :class="{opation:opation}"></i>
        </van-dropdown-menu>
      </van-col>
      <van-col span="6" style="font-size:13px" @click="opationTwo">
        <h4 class="nav">销量最高</h4>
        <i :class="{opation2:opation2}"></i>
      </van-col>
      <van-col span="6" style="font-size:13px" @click="opationThree">
        <h4 class="nav">距离最近</h4>
        <i :class="{opation3:opation3}"></i>
      </van-col>
      <van-col span="6" style="font-size:13px" @click="opationFour">
        <span>筛选</span>
        <van-icon name="filter-o" class="navIcon" />
        <i :class="{opation4:opation4}"></i>
      </van-col>
    </van-row>
    <div>
      <shopInfor :shopData="shopData" />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import shopInfor from "./../shopInformation/shopInfo.vue";
export default {
  name: "shopping",
  components: {
    shopInfor,
  },
  data() {
    return {
      shopData: [],
      opation: false,
      opation2: false,
      opation3: false,
      opation4: false,
      value1: 0,
      option1: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
    };
  },
  created() {
    this.geolocation();
    this.getData();
  },
  computed: {
    address() {
      return this.$store.state.address;
    },
  },
  methods: {
    getData() {
      axios
        .get("https://element-interface.herokuapp.com/api/profile/batch_shop")
        .then((Response) => {
          return Response.data.menu;
        })
        .then((data) => {
          console.log(data);
          this.shopData = data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    opationOne() {
      this.opation = true;
      this.opation2 = false;
      this.opation3 = false;
      this.opation4 = false;
    },
    opationTwo() {
      this.opation = false;
      this.opation2 = true;
      this.opation3 = false;
      this.opation4 = false;
    },
    opationThree() {
      this.opation = false;
      this.opation2 = false;
      this.opation3 = true;
      this.opation4 = false;
    },
    opationFour() {
      this.opation = false;
      this.opation2 = false;
      this.opation3 = false;
      this.opation4 = true;
    },
    geolocation() {
      const self = this;
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset: new AMap.Pixel(10, 20),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: "RB",
        });
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, "complete", onComplete);
        AMap.event.addListener(geolocation, "error", onError);

        function onComplete(data) {
          // data是具体的定位信息
          //   console.log(data.formattedAddress);
          self.$store.dispatch("getAddress", data.formattedAddress);
          //   没有该信息的时候
          //   if (data.formattedAddress == undefined) {
          //     AMap.plugin("AMap.Geocoder", function () {
          //       var geocoder = new AMap.Geocoder({
          //         // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          //         city: "010",
          //       });
          //       geocoder.getLocation("北京市海淀区苏州街", function (
          //         status,
          //         result
          //       ) {
          //         if (status === "complete" && result.info === "OK") {
          //           // result中对应详细地理坐标信息
          //           console.log(result.geocodes);
          //         }
          //       });
          //     });
          //   }
        }
        // 定位出错
        function onError(data) {
          //   console.log(data);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.address {
  display: block;
  font-size: 12px;
  padding-left: 20px;
  padding-top: 10px;
  color: rgb(28, 27, 27);
}
.errorAddress {
  display: block;
  font-size: 12px;
  padding-left: 20px;
  padding-top: 10px;
  color: red;
}
.van-icon-location-o {
  position: absolute;
  top: 27px;
  left: 0;
}
.col {
  height: 10px;
  .searchIcon {
    position: fixed;
    top: 1px;
    left: 35px;
    z-index: 9999;
  }
  .search {
    position: fixed;
    left: 9%;
    display: inline-block;
    width: 77%;
    border-radius: 10px;
    height: 10px;
    font-size: 12px;
    padding-left: 15px;
    border: 2px solid rgb(24, 24, 24);
    z-index: 3453453453453453453;
  }
}
.shop {
  text-align: center;
  padding-top: 50px;
  padding-bottom: 20px;
  font-weight: 900;
  .nav {
    font-weight: normal;
  }
}
.van-col {
  text-align: center;
}
/deep/.van-dropdown-menu__bar {
  box-shadow: 0 0 0 #fff;
  position: absolute;
  top: 107px;
  text-align: center;
}
.opation {
  padding-top: 30px;
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid rgb(194, 79, 79);
}
.opation2 {
  position: relative;
  top: 7px;
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid rgb(194, 79, 79);
}
.opation3 {
  position: relative;
  top: 7px;
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid rgb(194, 79, 79);
}
.opation4 {
  position: relative;
  top: 7px;
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid rgb(194, 79, 79);
}
.redirect {
  position: relative;
  top: 20px;
  left: 0;
}
.title {
  position: fixed;
}
</style>